import React from 'react'
import _ from 'underscore'
import Card from 'lib/components/card.jsx'
import format from 'lib/util/format'
export default class JSErrorDetail extends React.Component{
  render(){
    var trace = this.props.trace
    return (
      <div className="widget-content">
        <div className="pure-g">
          <div className="pure-u-1">
            <div className="box">
              <Card>
                <div className="pure-g">
                  <div className="pure-u-1 pure-u-lg-1-3">
                    WebView：
                    {trace.baseDetail[0]}
                  </div>
                  <div className="pure-u-1 pure-u-lg-1-3">
                    发生时间：
                    {format.stampToTime(trace.timestamp)}
                  </div>
                  <div className="pure-u-1 pure-u-lg-1-3">
                    操作系统：
                    {trace.baseDetail[2]+' '+trace.baseDetail[3]}
                  </div>
                  <div className="pure-u-1 pure-u-lg-1-3">
                    地域：
                    {trace.baseDetail[1]}
                  </div>
                  <div className="pure-u-1 pure-u-lg-1-3">
                    接入方式：
                    {trace.baseDetail[6]}
                  </div>
                  <div className="pure-u-1 pure-u-lg-1-3">
                    电量：
                    {trace.baseDetail[4]}
                  </div>
                  <div className="pure-u-1 pure-u-lg-1-3">
                    内存：
                    {trace.baseDetail[8]}
                  </div>

                  <div className="pure-u-1">
                    build-id：
                    <p style={{wordBreak: 'break-all'}}>{trace.baseDetail[5]}</p>
                  </div>
                  <div className="pure-u-1">
                    错误信息：
                    <p style={{wordBreak: 'break-all'}}>{trace.errMsg}</p>
                  </div>
                  <div className="pure-u-1">
                    User Agent：
                    <p style={{wordBreak: 'break-all'}}>{trace.userAgent}</p>
                  </div>
                </div>
              </Card>
            </div>
          </div>
        </div>
        <div className="pure-g">
          <div className="pure-u-1">
            <div className="box">
              <Card title="堆栈信息">
                <ul>
                  {
                    trace.errStack.split('\n').map((s) => {
                      return (
                        <li style={{wordWrap:'break-word'}} key={s}>{s}</li>
                      )
                    })
                  }
                </ul>
              </Card>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
